<template>
  <el-form class="form" ref="formRef" :model="formData" @keyup.enter.native="handleLogin" size="large">
    <el-form-item prop="username" :rules="[{ required: true, message: '请输入用户名' }]">
      <el-input
        label="账号"
        type="text"
        placeholder="请输入用户名"
        prefix-icon="user"
        v-model="formData.username"
        clearable
        autocomplete="off"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码' }]">
      <el-input
        label="密码"
        type="password"
        placeholder="请输入密码"
        prefix-icon="lock"
        v-model="formData.password"
        autocomplete="off"
        show-password
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        class="login-submit"
        @click="handleLogin"
        :loading="loginLoading"
        style="width: 100%"
      >
        <span>登录</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import useUserStore from 'jax-node/stores/user'

const userStore = useUserStore()
const loginLoading = ref(false)
const formRef = ref()
const formData = reactive({
  username: null,
  password: null,
  code: null,
})

const handleLogin = () => {
  formRef.value.validate().then(val => {
    loginLoading.value = true
    userStore.login(formData).finally(res => {
      loginLoading.value = false
    })
  })
}
</script>

<style></style>
